import React from 'react';

// 导入搜索导航栏组件
import SearchHeader from '../../components/SearchHeader'
import HouseItem from '../../components/HouseItems'
import Sticky from '../../components/Sticky'
import NoHouse from '../../components/NoHouse'
import Filter from './components/Filter'
// 导入样式
import styles from './index.module.css'
import { Flex } from 'antd-mobile'

import { getHousesApi } from "../../api/axios";

import { Toast } from 'antd-mobile';

import { List, AutoSizer, WindowScroller, InfiniteLoader } from 'react-virtualized';

// 带入环境变量的基地址
import { BASE_URL } from '../../utils/url'
// 导入获取地址函数
import { getCurrentCity } from "../../utils/getCurrentCity";

/* 
  切换城市显示房源：

  原因：在组件外部的代码只会在项目加载时执行一次（刷新页面）。在切换路由时，不会重新重新执行。

       组件内部的 componentDidMount() 会在组件展示时执行，进入页面一次，执行一次。

  1 注释掉 获取当前定位城市信息 的代码。
  2 导入 utils 中的 getCurrentCity 方法。
  3 在 componentDidMount 中调用 getCurrentCity() 方法来获取当前定位城市信息。
  4 将 label 和 value 保存到 this 中。
  5 用到 label 和 value 的地方，使用 this.label 或 this.value 来访问。
*/
// 获取地址  
// const { label, value } = JSON.parse(localStorage.getItem('localCity'))

export default class HouseList extends React.Component {
    state = {
        // 列表数据
        list: [],
        // 总条数
        count: 0,
        // 数据是否加载中
        isLoading: false
    }
    // 初始化实例属性
    filters = {}

    label = ''
    value = ''
    async componentDidMount() {
        // 获取定位
        const { label, value } = await getCurrentCity()
        this.label = label
        this.value = value

        this.getHouses()
    }
    // 过滤房屋筛选条件，---发送请求
    async getHouses() {

        this.setState({
            isLoading: true
        })
        // 开起加载提示
        Toast.loading('loading...', 0, null, false)
        // 发送请求
        const { data: res } = await getHousesApi({
            cityId: this.value,
            ...this.filters,
            start: 1,
            end: 20
        })
        const { list, count } = res.body

        Toast.hide()
        if (count !== 0) {
            Toast.info(`共找到 ${count} 套房源`, 2, null, false)
        }

        this.setState({
            list,
            count,
            isLoading: false
        })
    }

    //  接受子组件传入的过滤房屋筛选条件数据
    onFilter = filters => {
        // console.log('ohh', filters);
        // 每次点击完后，房源信息更新后，应返回顶部

        window.scroll(0, 0)

        this.filters = filters
        this.getHouses()
    }

    // 判断列表中的每一行是否加载完成
    isRowLoaded = ({ index }) => {
        return !!this.state.list[index]
    }

    // 用来获取更多房屋列表数据
    // 注意：该方法的返回值是一个 Promise 对象，并且，这个对象应该在数据加载完成时，来调用 resolve 让Promise对象的状态变为已完成。
    loadMoreRows = ({ startIndex, stopIndex }) => {
        console.log(startIndex, stopIndex)
        return new Promise(resolve => {
            // 开起加载提示
            Toast.loading('loading...', 0, null, false)
            getHousesApi({
                cityId: this.value,
                ...this.filters,
                start: startIndex,
                end: stopIndex
            }).then(res => {
                Toast.hide()
                this.setState({
                    list: [...this.state.list, ...res.data.body.list]
                })

                // 数据加载完成时，调用 resolve 即可
                resolve()
            })
        })
    }

    // 封装渲染房屋列表的方法
    renderHouseList = ({ key, index, style }) => {
        // 根据索引号来获取当前这一行的房屋数据
        const { list } = this.state
        const house = list[index]
        // console.log(house,'房源列表');

        // 判断 house 是否存在
        // 如果不存在，就渲染 loading 元素占位
        if (!house) {
            return (
                <div key={key} style={style}>
                    <p className={styles.loading} />
                </div>
            )
        }
        return (
            <HouseItem
                key={key}
                // 注意：该组件中应该接收 style，然后给组件元素设置样式！！！
                style={style}
                onClick={()=>{this.props.history.push(`/detail/${house.houseCode}`)}}
                src={BASE_URL + house.houseImg}
                title={house.title}
                desc={house.desc}
                tags={house.tags}
                price={house.price}
            />
        )
    }

    // 渲染列表
    renderHousesData = () => {

        // 没有房源提示组件
        const { count, isLoading } = this.state
        if (count === 0 && !isLoading) {
            return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>
        }

        // 渲染房源列表
        return (
            <InfiniteLoader
                isRowLoaded={this.isRowLoaded}
                loadMoreRows={this.loadMoreRows}
                rowCount={count}
            >
                {({ onRowsRendered, registerChild }) => (
                    <WindowScroller>
                        {({ height, isScrolling, scrollTop }) => (
                            <AutoSizer>
                                {({ width }) => (
                                    <List
                                        onRowsRendered={onRowsRendered}
                                        ref={registerChild}
                                        autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
                                        width={width} // 视口的宽度
                                        height={height} // 视口的高度
                                        rowCount={count} // List列表项的行数
                                        rowHeight={120} // 每一行的高度
                                        rowRenderer={this.renderHouseList} // 渲染列表项中的每一行
                                        isScrolling={isScrolling}
                                        scrollTop={scrollTop}
                                    />
                                )}
                            </AutoSizer>
                        )}
                    </WindowScroller>
                )}
            </InfiniteLoader>
        )
    }





    render() {
        return (
            <div className={styles.root}>
                <Flex className={styles.header}>
                    <i className="iconfont icon-back" />
                    <SearchHeader cityName={this.label} className={styles.searchHeader} />
                </Flex>
                {/* 条件筛选栏--用Sticky组件包裹实现听不吸顶效果 */}

                <Sticky height={40}>
                    <Filter onFilter={this.onFilter} />
                </Sticky>
                {/* 渲染房屋信息列表 */}
                <div className={styles.houseItems}>
                    {this.renderHousesData()}
                </div>
            </div>
        )
    }
}